<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" Content="10; ./welcome.html">

<title>The ZhiSheng's Website</title>
<style type="text/css">
    canvas {display: block;}
	html
	{
	background:black;
	margin:0px;
	padding:0px;
	border:0px;
	height:100%;
	width:100%;
	overflow:hidden;
	}
</style>
</head>
<body>
  <canvas id="c">
  <script type="text/javascript">
		window.onload=function()
		{
			var c = document.getElementById("c");
			var ctx = c.getContext("2d");

			c.addEventListener('click', function(e)
			{
				location.href="./welcome.html";
			}, false);

			//全屏显示
			c.height = window.innerHeight;
			c.width = window.innerWidth;

			var txts = "052あ7B8い甘GANE士CHENG成う1え9お甘かき士くけこ成EFCADG甘HIJK士LMNO成PQRSTU甘VWXYZE士FCADGH成IJKLM";
			txts = txts.split("");

			var font_size = 28;
			var columns = c.width/font_size;

			//每行要输出数组
			var drops = [];

			for(var x = 0; x < columns; x++)
				drops[x] = 1;

			//字符随机颜色
			var wh_color = new Array();
			wh_color[0]="#57CE13";
			wh_color[1]="#50BF7F";
			wh_color[2]="#50BF7F";

			//绘出字符
			function draw()
			{
				//黑色背景，半透明显示
				ctx.fillStyle = "rgba(0, 0, 0, 0.09)";
				ctx.fillRect(0, 0, c.width, c.height);

				//ctx.fillStyle = "#50BF7F";
				ctx.fillStyle = wh_color[parseInt(Math.random()*100+1)%3];
				ctx.font = font_size + "px arial";

				//drops循环
				for(var i = 0; i < drops.length; i++)
				{
					//随机打印字符
					var text = txts[Math.floor(Math.random()*txts.length)];

					//x = i*font_size
					//y = value of drops[i]*font_size
					ctx.fillText(text, i*font_size, drops[i]*font_size);

					if(drops[i]*font_size > c.height || Math.random() > 0.95)
						drops[i] = 0;

					//Y坐标增加
					drops[i]++;
				}
			}
			setInterval(draw, 50);
		}
</script>
</body>
</html>